<template>
    <div class="icons">
      <swiper :options="swiperOption" v-if="icons && icons.length">
        <!-- slides -->
        <swiper-slide v-for="(items,index) in pages"  :key="index">
          <div class="icon" v-for="(item,index) in items"  :key="index">
            <div class="icon-img">
              <img :src="item.imgUrl" alt="" class="icon-img-con">
            </div>
            <p class="icon-des">{{item.desc}}</p>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination" ref="swiper"></div>
      </swiper>

    </div>
</template>

<script>
    export default {
        data() {
            return {
              swiperOption: {
                pagination: {
                  el: '.swiper-pagination'
                },
                notNextTick: true
              },
            }
        },
      props:{
        icons:{
          type:Array,
          default:[]
        }
      },
      computed:{
          pages(){
            let pages = [];
            this.icons.forEach(function (item,index) {
              const page = Math.floor(index/8);
              if(!pages[page]){
                 pages[page] = []
              }
              pages[page].push(item)
            });
            return pages
          }
      }
    }
</script>

<style lang="stylus" ref="stylus">
  .icons
    .swiper-container
      height 0px
      padding-bottom 50%
      .icon
        float left
        width 25%
        overflow hidden
        position relative
        height 0
        padding-bottom 25%
        .icon-img
          position absolute
          top 0
          right 0px
          left  0
          bottom 22px
          box-sizing border-box
          padding 2px
          .icon-img-con
            height 100%
            display block
            margin 0 auto
        .icon-des
          position absolute
          left 0
          bottom 0
          right 0
          height 22px
          line-height 22px
          color #333
          text-align center
          font-size 12px
</style>
